#include "HtmlTemplate.h"
#include <unordered_map>

// 在类外部初始化静态成员变量
const char HtmlTemplate::htmlTemplate[] PROGMEM = R"rawliteral(
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.centered-box { flex-direction:column; text-align: center;  display: flex; justify-content: center; align-items: center;}
 form{display: flex;flex-direction: column;}
.centered-box-item{ padding-top: 2px; box-sizing: border-box; line-height: 30px; display: flex;flex: 1;}
.centered-box-item-tip{ width: 100%;;text-align: center; font-size: 10px;}
.button{flex: 1;line-height: 25px;width: 100%;background:#5ac725;color: #fff;}
.centered-box-label{ background-color: #e9e9e9;width: 50%; }
.centered-box-content{ display: flex; width: 50%;}
#tipTime{color: red;}
</style>
</head>
<body>
    <div class="centered-box">
    <h3>ESP01S Configuration</h3>
    <form method="post" action="/save">
        <div class="centered-box-item"><div class="centered-box-label">WiFi SSID</div><input type="text" class="centered-box-content" name="wifiSSID" value="{{wifiSSID}}"></div>
        <div class="centered-box-item"><div class="centered-box-label">WiFi Password</div><input type="text" class="centered-box-content" name="wifiPassword" value="{{wifiPassword}}"></div>
        <div class="centered-box-item"><div class="centered-box-label">MQTT Server</div><input type="text" class="centered-box-content" name="mqttServer" value="{{mqttServer}}"></div>
        <div class="centered-box-item"><div class="centered-box-label">MQTT Port</div><input type="text" class="centered-box-content" name="mqttPort" value="{{mqttPort}}"></div>
        <div class="centered-box-item"><div class="centered-box-label">MQTT Client ID</div><input type="text" class="centered-box-content" name="mqttClientId" value="{{mqttClientId}}"></div>
        <div class="centered-box-item"><div class="centered-box-label">MQTT User</div><input type="text" class="centered-box-content" name="mqttUser" value="{{mqttUser}}"></div>
        <div class="centered-box-item"><div class="centered-box-label">MQTT Password</div><input type="text" class="centered-box-content" name="mqttPassword" value="{{mqttPassword}}"></div>
        <div class="centered-box-item"><div class="centered-box-label">MQTT SSLCA</div><input type="text" class="centered-box-content" name="mqttSSLCA" value="{{mqttSSLCA}}"></div>
        <div class="centered-box-item"><div class="centered-box-label">MQTT SSLCA OPEN</div><input type="text" class="centered-box-content" name="mqttSSLCAOpen" value="{{mqttSSLCAOpen}}"></div>
        <div class="centered-box-item"><div class="centered-box-label">HTTP API URL</div><input type="text" class="centered-box-content" name="httpApiUrl" value="{{httpApiUrl}}"></div>
        <div class="centered-box-item"><div class="centered-box-label">HTTP API Type</div><input type="text" class="centered-box-content" name="httpApiType" value="{{httpApiType}}"></div>
        <div class="centered-box-item"><div class="centered-box-label">WiFi Error Sec</div><input type="text" class="centered-box-content" name="wifiErrSec" value="{{wifiErrSec}}"></div>
        <div class="centered-box-item"><div class="centered-box-label">WiFi Error Sec Open Web Conf</div><input type="text" class="centered-box-content" name="wifiErrSecOpenWebConf" value="{{wifiErrSecOpenWebConf}}"></div>
        <div class="centered-box-item"><div class="centered-box-label">Web Server End Sec Set</div><input type="text" class="centered-box-content" name="webServerEndSecSet" value="{{webServerEndSecSet}}"></div>
        <div class="centered-box-item"><div class="centered-box-label">Web Server End Sec</div><input type="text" class="centered-box-content" name="webServerEndSec" value="{{webServerEndSec}}"></div>
        <div class="centered-box-item"><div class="centered-box-label">MQTT Error Sec</div><input type="text" class="centered-box-content" name="mqttErrSec" value="{{mqttErrSec}}"></div>
        <div class="centered-box-item"><div class="centered-box-label">MQTT Error Sec Open Web Conf</div><input type="text" class="centered-box-content" name="mqttErrSecOpenWebConf" value="{{mqttErrSecOpenWebConf}}"></div>
        <div class="centered-box-item"><div class="centered-box-label">Start Time</div><input type="text" class="centered-box-content" name="startTime" value="{{startTime}}"></div>
        <div class="centered-box-item"><div class="centered-box-label">End Time</div><input type="text" class="centered-box-content" name="endTime" value="{{endTime}}"></div>
        <div class="centered-box-item"><div class="centered-box-label">Switch Status</div><input type="text" class="centered-box-content" name="switchStatus" value="{{switchStatus}}"></div>
        <div class="centered-box-item"><div class="centered-box-item-tip">*请在:<span id="tipTime">{{webServerEndSec}}</span>秒内完成保存 </div></div>
        <div class="centered-box-item"><input class="button" type="submit" value="保存"></div>
        </form>
    </div>
</body>
<script>
    var start=true
    var tipTime={{webServerEndSec}} || 300
    var timer =function(){
        setTimeout(()=>{
            tipTime--
            document.getElementById("tipTime").innerText=tipTime
            timer()
        },1000)
    }
    timer()
</script>
</html>
)rawliteral";

HtmlTemplate::HtmlTemplate() {}

std::string HtmlTemplate::generatePage(const GlobalConfig& config) {
    std::string page;
    const char* ptr = htmlTemplate;
    while (pgm_read_byte(ptr) != '\0') {
        page += static_cast<char>(pgm_read_byte(ptr++));
    }

    std::unordered_map<std::string, std::string> replacements = {
        {"{{wifiSSID}}", config.getWifiSsid()},
        {"{{wifiPassword}}", config.getWifiPassword()},
        {"{{mqttServer}}", config.getMqttServer()},
        {"{{mqttPort}}", config.getMqttPort()},
        {"{{mqttClientId}}", config.getMqttClientId()},
        {"{{mqttUser}}", config.getMqttUser()},
        {"{{mqttPassword}}", config.getMqttPassword()},
        {"{{mqttSSLCA}}", config.getMqttSslca()},
        {"{{mqttSSLCAOpen}}", config.getMqttSslcaOpen()},
        {"{{httpApiUrl}}", config.getHttpApiUrl()},
        {"{{httpApiType}}", config.getHttpApiType()},
        {"{{wifiErrSec}}", std::to_string(config.getWifiErrSec())},
        {"{{wifiErrSecOpenWebConf}}", std::to_string(config.getWifiErrSecOpenWebConf())},
        {"{{webServerEndSecSet}}", std::to_string(config.getWebServerEndSecSet())},
        {"{{webServerEndSec}}", std::to_string(config.getWebServerEndSec())},
        {"{{mqttErrSec}}", std::to_string(config.getMqttErrSec())},
        {"{{mqttErrSecOpenWebConf}}", std::to_string(config.getMqttErrSecOpenWebConf())},
        {"{{startTime}}", std::to_string(config.getStartTime())},
        {"{{endTime}}", std::to_string(config.getEndTime())},
        {"{{switchStatus}}", config.isSwitchStatus()? "ON" : "OFF"}
    };

    for (const auto& pair : replacements) {
        const std::string& placeholder = pair.first;
        const std::string& value = pair.second;
        size_t pos = 0;
        while ((pos = page.find(placeholder, pos)) != std::string::npos) {
            page.replace(pos, placeholder.length(), value);
            pos += value.length();
        }
    }

    return page;
}